<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Message</title>
<link rel='stylesheet' href='resources/css/asset.css' type='text/css'
	media='all' />
<link rel='stylesheet' href='resources/css/style.css' type='text/css'
	media='all' />
<link rel='stylesheet' href='resources/css/grid.css' type='text/css'
	media='all' />
<script src="resources/js/jquery-1.8.2.min.js" type="text/javascript"
	charset="utf-8"></script>

<script>
	var messagesLength = 0;
	$(document).ready(
		function() {
			$("#a").click(function() {
				$("#form2").hide();
				$("#form1").show();
				$("#form3").hide();
			});
			$("#b").click(function() {
				$("#form1").hide();
				$("#form2").show();
				$("#form3").hide();
			});
			
			$('#search').keypress(function(event){
				var keycode = (event.keyCode ? event.keyCode : event.which);
				var id = document.getElementById("searching").value;
				if(keycode == '13'){
					$.getJSON('services/manager/friendProfile/'+id, function(detail) {
						if (detail.emailAddress === null) {
							alert("User tidak ditemukan.");
						} else {
							alert(detail.emailAddress);
						}
					});
				}
			});
			
			$.getJSON('services/manager/messages', function(data) {
				$.each(data.threads, function(key, val) {
					var liElement = document.createElement('li');
					var checkBox = document.createElement('input');
					var aElement = document.createElement('a');
					var participant = document.createElement('span')
					checkBox.type="checkbox";
					checkBox.value=val.id;
					aElement.href="#"+val.id;
					aElement.textContent=val.subject;
					aElement.setAttribute("style","padding: 10px !important");
					participant.textContent=val.participants.toString();
					liElement.appendChild(checkBox);
					liElement.appendChild(aElement);
					liElement.appendChild(participant);
					liElement.setAttribute("style","float:none !important; padding-bottom: 5px;");
					var ulElement = $("#form2 ul").append(liElement);
					$("#form2 ul li a").click(function(){
						var path = this.href;
						var id = path.substr(path.indexOf('#')+1, path.length);
						$.getJSON('services/manager/messages/'+id, function(detail) {
								$("#messageDetail thead tr").children().remove();
								$("#messageDetail thead tr").append("<th>"+detail.threads[0].subject+"</th>");
								$.each(detail.threads[0].messages, function(detailkey, detailval) {
									$("#messageDetail tbody").children().remove();
									var detailRowSummary = document.createElement('tr');
									var detailValueSummaryLabel = document.createElement('td');
									var detailValueSummaryValue = document.createElement('td');
									detailValueSummaryLabel.textContent="Subject";
									detailValueSummaryValue.textContent=detail.threads[0].subject;
									detailRowSummary.appendChild(detailValueSummaryLabel);
									detailRowSummary.appendChild(detailValueSummaryValue);
									$("#messageDetail tbody").append(detailRowSummary);
									var detailRowContent = document.createElement('tr');
									var detailValueContent = document.createElement('td');
									detailValueContent.colSpan=2;
									detailValueContent.textContent=detailval.description;
									detailRowContent.appendChild(detailValueContent);
									$("#messageDetail tbody").append(detailRowContent);
								});
							$("#form3").show();
							$("#form1").hide();
							$("#form2").hide();
						});
					});
					//.apppend("<input type='checkbox' id='"+val.id+"'/>");
				});
				//<span id='subject'><a href='javascript:showContent(\'"+val.id+"\')'>"+val.subject+"</a></span></li>
			});
	});
	
</script>
</head>
<body>

	<!-- Content -->
	<section id="wrapper">
		<!-- Header -->

		<header id="header">
			<div id="logo">
				<h4>Babytivities</h4>
			</div>
			<div id="backlinks">
			<div id="search">
				<input type="text" id="searching" name="searching" placeholder="search peoples here"/>
			</div>
				<ul>
					<li><a href="home.html">Home</a></li>
					<li><a href="scrap.html">Scrap</a></li>
					<li><a href="message.html">Message</a></li>
					<li><a href="gallery.html">Gallery</a></li>
					<li><a href="profile.html">Profile</a></li>
				</ul>
			</div>
		</header>
		<div class="clearfix">&nbsp;</div>

		<div id="main_wrap" class="container_12">
			<div class="grid_2 alpha">
				<div id="wrap_sidebar">
					<ul>
						<li><a id="a" href="#">Compose</a></li>
						<li><a id="b" href="#">Inbox</a></li>
					</ul>
				</div>
			</div>
			<div class="grid_10 omega">
				<div id="form1" style="display: none;">
					<form action="services/manager/message" method="post">
						<h2>Compose Message</h2>
						<table>
							<tr>
								<td>To</td>
								<td><input type="text" name="recipientId"></td>
							</tr>

							<tr>
								<td>Subject</td>
								<td><input type="text" name="subject"></td>
							</tr>

							<tr>
								<td>Message</td>
								<td><textarea rows="6" name="content"></textarea></td>
							</tr>

							<tr>
								<td colspan="2" align="right"><input type="submit"value="Send"></td>
							</tr>
						</table>
					</form>
				</div>
				<div id="form2">
					<h2>Inbox</h2>
					<ul></ul>
				</div>
				<div id="form3" style="display: none;">
					<h2>Message Detail</h2>
					<table id="messageDetail">
						<thead>
							<tr></tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
		</div>

	</section>

	<!-- Footer -->
	<footer id="footer">
		<span>&copy; 2012 <a href="#">babytivities</a></span>
	</footer>

</body>
</html>
